<template>
	<view>
		<view class="head">
			<text @click="back">返回</text>
			<text>新增</text>
		</view>
		<view class="body">
			<form @submit="onSubmit" @reset="formReset">
				<picker @change="bindPickerChange" :value="date.index" :range="date.arr">
					<uni-forms-item label="单位名称" name="dwname">
						<uni-easyinput type="text" v-model="date.shujudata.dwname" placeholder="请选择" />
					</uni-forms-item>
										
									</picker>
						<uni-forms-item label="取水许可证号" name="qsid">
							<uni-easyinput type="text" v-model="date.shujudata.qsid" placeholder="自动带出" />
						</uni-forms-item>
						<uni-forms-item label="更换水表号" name="sbid">
							<uni-easyinput type="text" v-model="date.shujudata.sbid" placeholder="请选择" />
						</uni-forms-item>
						<uni-forms-item label="原计量类型及型号" name="yjlid">
							<uni-easyinput type="text" v-model="date.shujudata.yjlid" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="新计量类型及型号" name="xjlid">
							<uni-easyinput type="text" v-model="date.shujudata.xjlid" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="新设备编号" name="xsbid">
							<uni-easyinput type="text" v-model="date.shujudata.xsbid" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="原铭牌流量" name="ympid">
							<uni-easyinput type="text" v-model="date.shujudata.ympid" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="新铭牌流量" name="xmpid">
							<uni-easyinput type="text" v-model="date.shujudata.xmpid" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="原计量读数" name="yjlds">
							<uni-easyinput type="text" v-model="date.shujudata.yjlds" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="新计量读数" name="xjlds">
							<uni-easyinput type="text" v-model="date.shujudata.xjlds" placeholder="请输入" />
						</uni-forms-item>
						<uni-section title="只选择图片" type="line">
									<view class="example-body">
										<uni-file-picker limit="3" title="现场照片(最多选择3张图片)" v-model="date.img"
										fileMediatype="image" 
										@select='pushimg'
										@delete='del'
										></uni-file-picker>
									</view>
								</uni-section>
						<view class="uni-btn-v">
							<button  type="default" class="color"  size="mini"  form-type="submit">提交</button>
							<button type="default"  class="color" size="mini" form-type="reset">重置</button>
						</view>
					</form>
		</view>
	</view>

</template>
<script>
	import {
		reactive
	} from 'vue';
import {useStore} from "vuex"
	import http from '../../utils/http.js'
	import upload from '../../utils/upload.js'
		export default {
		setup() {
			let date = reactive({
				shujudata:{dwname: '',
				qsid: '',
				sbid: '',
				yjlid:'',
				xjlid:"",
				xsbid:'',
				ympid:'',
				xmpid:'',
				yjlds:'',
				xjlds:'',
				ghtime:'',
				},
				img:[],
				arr:['华为','小米','oppo','vivo','魅族'],
				index:0,
				imgdata:[]

			})
			let onSubmit = () => {
				let data=new Date()
				let year=data.getFullYear()
				let month=jisuan(data.getMonth()+1)
				let day=data.getDate()
				let time=year+'-'+month+'-'+day
				date.shujudata.ghtime=time
				http({
					url:'/jiliang/jiliangadd',
					method:'post',
					data:date.shujudata
				}).then((res)=>{
					if(res.data.code==200){
						for(let i=0;i<date.imgdata.length;i++){
							upload({
										url: '/jiliang/upload', //仅为示例，非真实的接口地址
										filePath: date.imgdata[i],
										name: 'file',
										formData:{}
									}).then((res)=>{
									console.log(res)
									
									})
						}
						uni.showToast({
							title:'添加成功',
						})
						back()	
					}
					
					if(res.data.code==401){
						formReset()
						uni.showToast({
							title:'添加失败，数据已存在.',
							icon:'error'
						})
					}
				})
				
				}
				let fail=()=>{
					$refs.message.open()
				}
				let jisuan=(v)=>{
					return v>9?''+v:'0'+v;
				}
let bindPickerChange=(e)=>{
	date.shujudata.dwname=date.arr[e.detail.value]
	}
let formReset=()=>{
	date.img=[],
	date.imgdata=[]
	
}//返回
let back=()=>{
	uni.navigateTo({
		url:'./jiliang'
	})
}
let pushimg=(ev)=>{
	// date.img=ev.tempFiles
	date.img=ev.tempFiles
	date.imgdata=ev.tempFilePaths
		}
		let del=(ev)=>{
			date.imgdata=ev.tempFilePaths
		}
			return {
				date,
				onSubmit,
				formReset,
				pushimg,
				back,
				bindPickerChange,
				jisuan,
				del,
				fail
			};
		},
	};
</script>

<style lang="less">
	.head {
		display: flex;
		padding: 30rpx 0 30rpx 50rpx;
		border-bottom: 1rpx solid #B9B9B9;

		text:first-child {
			flex: 2;
			color: #B3D4FC;
		}

		text:last-child {
			flex: 3;
		}
	}
.color{
	background-color: #B3D4FC;
	
}
.uni-btn-v{
	display: flex;
	text-align: center;
	flex-direction: column;
	margin-top: 200rpx;
	button{
		margin:25rpx auto;
	}
}
	.body {
		margin-top: 30rpx;
		padding: 20rpx;
	}

	
</style>
